<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash-icon.png">
<link rel="apple-touch-startup-image" href="images/splash-screen.png" 			media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash-screen@2x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>
<title>Epsilon Mobile Framework - Version 2.0</title>
<link href="css/style.css"     		 rel="stylesheet" type="text/css">
<link href="css/framework.css" 		 rel="stylesheet" type="text/css">
<link href="css/menu.css" 		 	 rel="stylesheet" type="text/css">
<link href="css/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="css/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="css/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="css/animate.css"			 rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/framework.plugins.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="preloader">
	<div id="status">
    	<p class="center-text">
			正在加载中...
            <em>尊敬的大人:小人正在努力奔跑中 还请稍等</em>
        </p>
    </div>
</div>
<div class="all-elements">
<div id="perspective" class="perspective effect-airbnb"><!--this houses the entire page, and creates the effect-->
    <div class="header">
        <a href="#" id="showMenu"><i class="fa fa-navicon"></i></a>
        <a href="#" id="pageLogo"><img src="images/z.png" alt="img"></a>
        <a href="#" id="openMail"><i class="fa fa-envelope-o"></i></a>
    </div> 	
    <div class="outer-nav">
        <div class="inner-nav">
            <div class="nav-item">
                <a href="index.html">
                    <i class="nav-icon fa fa-home"></i>
                    Home
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item active-item">
                    <i class="nav-icon fa fa-cog"></i>
                    Features
                </a>
                <div class="nav-sub-item nav-sub-active">
                    <a class="active-item" href="features-type.html">Type</a>
                    <a href="features-jquery.html">jQuery</a>
                    <a href="features-others.html">Others</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-camera"></i>
                    Gallery
                </a>
                <div class="nav-sub-item">
                    <a href="gallery-wide.html">Thumbs Wide</a>
                    <a href="gallery-round.html">Thumbs Round</a>
                    <a href="gallery-square.html">Thumbs Square</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-picture-o"></i>
                    Portfolio
                </a>
                <div class="nav-sub-item">
                    <a href="portfolio-adaptive.html">Adaptive</a>
                    <a href="portfolio-one.html">One Column</a>
                    <a href="portfolio-two.html">Two Columns</a>
                    <a href="portfolio-wide.html">Wide Columns</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-files-o"></i>
                    Pages
                </a>
                <div class="nav-sub-item">
                    <a href="page-soon.html">Soon Page</a>
                    <a href="page-error.html">Error Page</a>
                    <a href="page-profile.html">Profile Page</a>
                    <a href="page-timeline.html">Timeline Page</a>
                    <a href="page-updates.html">Updates Page</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="contact.html">
                    <i class="nav-icon fa fa-envelope"></i>
                    Contact
                </a>
            </div>
            <div class="nav-item">
                <a id="closeMenu" href="#">
                    <i class="nav-icon fa fa-times"></i>
                    Close
                </a>
            </div>
        </div>
    </div>
    <div class="perspective_container"><!--the "moving to the left" content box-->
        <div class="wrapper"><!-- wrapper needed for scroll -->
         	<div class="header-clear"><i class="fa fa-times"></i></div>
			<div class="decoration"></div>
            
			<div class="content">
                <div class="container no-bottom">
                    <p>
                        1/1<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales. Pellentesque vel mollis odio, ac facilisis arcu. 
                        Etiam rutrum sem non risus condimentum, quis iaculis ligula facilisis.       
                    </p>  
                </div>
                
                
                <div class="decoration"></div>
                <div class="container no-bottom">
                    <p>
                        1/1<br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                        Proin luctus congue sodales. Pellentesque vel mollis odio, ac facilisis arcu. 
                        Etiam rutrum sem non risus condimentum, quis iaculis ligula facilisis.       
                    </p>
                    
                    <div class="one-half">
                        <p>
                            1/2<br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                            Proin luctus congue sodales. Pellentesque vel mollis odio. 
                         </p>
                    </div>
                    <div class="two-half last-column">
                        <p>
                            2/2<br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                            Proin luctus congue sodales. Pellentesque vel mollis odio. 
                        </p>        
                    </div>
                    
                    <div class="one-third">
                        <p>
                            1/3<br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                            Proin luctus congue sodales. 
                         </p>
                    </div>
                    <div class="one-third">
                        <p>
                            2/3<br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                            Proin luctus congue sodales.  
                        </p>        
                    </div>
                    <div class="one-third last-column">
                        <p>
                            3/3<br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum accumsan ante.
                            Proin luctus congue sodales. 
                        </p>        
                    </div>
                </div>
                
                <div class="decoration"></div>
            
                <div class="container no-bottom">
                    <h3>Sample of text highlights</h3>
                    <p>Text highlights are an awesome way to emphesize something important you want to show off!</p>
                    <div class="one-half-responsive">
                        <p><span class="text-highlight highlight-turqoise">This is a highlight</span>and this is the text</p>
                        <p><span class="text-highlight highlight-green">This is a highlight</span>and this is the text</p>
                        <p><span class="text-highlight highlight-blue">This is a highlight</span>and this is the text</p>
                        <p><span class="text-highlight highlight-magenta">This is a highlight</span>and this is the text</p>
                    </div>
                    <div class="one-half-responsive last-column">
                        <p><span class="text-highlight highlight-dark">This is a highlight</span>and this is the text</p>
                        <p><span class="text-highlight highlight-yellow">This is a highlight</span>and this is the text</p>
                        <p><span class="text-highlight highlight-red">This is a highlight</span>and this is the text</p>
                        <p><span class="text-highlight highlight-orange">This is a highlight</span>and this is the text</p>
                    </div>
                </div>  
                
                <div class="decoration"></div>
                
                <div class="container no-bottom">
                    <h3>Icon lists</h3>
                    <p>Icon lists are absolutely awesome! They are very simple to use and they're retina!</p>
                    <div class="one-half">
                        <ul class="icon-list">
                            <li class="address-list">Address icon</li>
                            <li class="block-list">Block icon</li>
                            <li class="bookmark-list">Bookmark icon</li>
                            <li class="briefcase-list">Briefcase icon</li>
                            <li class="bubble-list">Bubble icon</li>
                            <li class="buy-list">Buy icon</li>
                            <li class="calendar-list">Calendar icon</li>
                            <li class="clipboard-list">Clipboard icon</li>
                            <li class="clock-list">Clock icon</li>
                            <li class="delete-list">Delete icon</li>
                            <li class="diagram-list">Diagram icon</li>
                            <li class="document-list">Document icon</li>
                            <li class="down-list">Down icon</li>
                            <li class="flag-list">Flag icon</li>
                            <li class="folder-list">Folder icon</li>
                            <li class="gear-list">Gear icon</li>
                            <li class="globe-list">Globe icon</li>
                            <li class="heart-list">Heart icon</li>
                            <li class="help-list">Help icon</li>
                            <li class="info-list">Info icon</li>
                            <li class="key-list">Key icon</li>              
                        </ul>
                    </div>
                    <div class="one-half last-column">
                        <ul class="icon-list">
                            <li class="left-list">Left icon</li>
                            <li class="letter-list">Letter icon</li>
                            <li class="monitor-list">Monitor icon</li>
                            <li class="pencil-list">Pencil icon</li>
                            <li class="plus-list">Plus icon</li>
                            <li class="present-list">Present icon</li>
                            <li class="print-list">Print icon</li>
                            <li class="right-list">Right icon</li>
                            <li class="save-list">Save icon</li>
                            <li class="search-list">Search icon</li>
                            <li class="shield-list">Shield icon</li>
                            <li class="statistics-list">Statistics icon</li>
                            <li class="stop-list">Stop icon</li>
                            <li class="tick-list">Tick icon</li>
                            <li class="trash-list">Trash icon</li>
                            <li class="up-list">Up icon</li>
                            <li class="user-list">User icon</li>
                            <li class="wallet-list">Walet icon</li>
                            <li class="warning-list">Warning icon</li>
                            <li class="home-list">Home icon</li>
                            <li class="label-list">Label icon</li>  
                        </ul>
                    </div>
                </div>     
                    
                <div class="decoration"></div>
                
                <div class="container">
                    <div class="one-third-responsive">
                        <ul class="normal-list">
                            <li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                            <li>List item 4</li>
                            <li>List item 5</li>
                        </ul>
                    </div>
                    <div class="one-third-responsive">
                        <ol class="number-list">
                            <li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                            <li>List item 4</li>
                            <li>List item 5</li>
                        </ol>
                    </div>
                    <div class="one-third-responsive last-column">
                        <ul class="font-icon-list">
                            <li><i class="fa fa-facebook"></i>Facebook list</li>
                            <li><i class="fa fa-twitter"></i>Twitter list</li>
                            <li><i class="fa fa-spinner fa-spin"></i>Spinner list</li>
                            <li><i class="fa fa-phone"></i>Phone List</li>
                            <li><i class="fa fa-tablet"></i>Tablet List</li>
                        </ul>
                    </div>
                </div>
                
                <div class="decoration"></div>
                
                <div class="container no-bottom">
                    <h3>Code structures</h3>
                    <p>Maybe you're a developer and want to add code, maybe not, it's still an included option!</p>
                    <div class="code">
                        <span class="wline"> &lt;p class="test1"&gt;Simple code!&lt;/p&gt;</span>
                        <span class="gline"> &lt;p class="test2"&gt;Simple code!&lt;/p&gt;</span>
                    </div>      
                </div>
                
                <div class="decoration"></div>
                
                <div class="container no-bottom">
                    <h3>Simple notifications!</h3>
                    <p>These notifications can be shown but they cannot be dismissed by tapping or closing!</p>
                    <div class="one-half-responsive">
                        <div class="static-notification-red">
                            <p class="center-text uppercase">Red notification!</p>
                        </div>
                        <div class="static-notification-green">
                            <p class="center-text uppercase">Green notification!</p>
                        </div>
                    </div>
                    <div class="one-half-responsive last-column">
                        <div class="static-notification-yellow">
                            <p class="center-text uppercase">Yellow notification!</p>
                        </div>
                        <div class="static-notification-blue">
                            <p class="center-text uppercase">Blue notification!</p>
                        </div>    
                    </div>
                    <div class="clear"></div>
                </div>   
                
                <div class="decoration"></div>
                
                <div class="container no-bottom">  
                    <h3 class="left-text">Left text.</h3>
                    <p class="left-text">
                        This is a simple paragrahp aligned to the left side of the screen!
                        This is a simple paragrahp aligned to the left side of the screen!
                    </p>
                    
                    <div class="decoration"></div>
                    
                    <h3 class="center-text">Center text.</h3>
                    <p class="center-text">
                        This is a simple paragraph aligned to the center part of the screen!
                        This is a simple paragraph aligned to the center part of the screen!
                    </p>
                    
                    <div class="decoration"></div>
                    
                    <h3 class="right-text">Right text.</h3>
                    <p class="right-text">
                        This is a simple paragraph aligned to the right side of the screen!
                        This is a simple paragraph aligned to the right side of the screen!
                    </p>
                </div>
                
                <div class="decoration"></div>
            
                <div class="container no-bottom">
                   <h3>How about a table?</h3>
                   <p>And it's pure CSS3! That means just fill in the data, and the table expands to fit the size you need!</p>
                   <table cellspacing='0' class="table">
                        <tr>
                            <th>TABLE</th>
                            <th class="table-title">PLUS</th>
                            <th class="table-title">PRO</th>
                        </tr>
                        <tr>
                            <td class="table-sub-title"> ONE</td>
                            <td>Yes</td>
                            <td>Yes</td>
                        </tr>
                        <tr class='even'>
                            <td class="table-sub-title"> TWO</td>
                            <td>No</td>
                            <td>Yes</td>
                        </tr>
                        <tr>
                            <td class="table-sub-title"> THREE</td>
                            <td>No</td>
                            <td>No</td>
                        </tr>
                        <tr class='even'>
                            <td class="table-sub-title">VALUE</td>
                            <td class="price">$9.<sup class="small-price">99</sup></td>
                            <td class="price">$109.<sup class="small-price">99</sup></td>
                        </tr>       
                    </table>
                </div>  
    
                <div class="footer-section">
                    <p class="footer-text">
                        Copyright 2014.<br>
                        All rights reserved.
                    </p>
                    <div class="footer-icons">
                        <a href="#" class="footer-facebook-icon"><i class="fa fa-facebook"></i></a>
                        <a href="#" class="footer-google-icon"><i class="fa fa-google-plus"></i></a>
                        <a href="#" class="footer-twitter-icon"><i class="fa fa-twitter"></i></a>
                        <a href="#" class="footer-up-icon"><i class="fa fa-angle-up"></i></a>
                    </div>
                </div>
        	</div><!--content-->
        </div><!-- wrapper -->
    </div><!-- /perspective container -->
</div><!-- /perspective -->
</div>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>
